<template>
	<view>
		<u-datetime-picker :show="show" v-model="time" mode="datetime" @cancel="close"
			@confirm="confirm" :minDate="631123200000"></u-datetime-picker>
		<view v-if="calcedData.B1">
			<!-- 表头 -->
			<u-row>
				<u-col span="7">
					<u-row customClass="height100">
						<u-col span="3">
							<view class="fs-44" :style="{color:colors.B1,}">
								{{calcedData.B1 || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view class="fs-44" :style="{color:colors.C1,}">
								{{calcedData.C1 || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view class="fs-44" :style="{color:colors.D1,}">
								{{calcedData.D1 || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view class="fs-44" :style="{color:colors.E1,}">
								{{calcedData.E1 || ''}}
							</view>
						</u-col>
					</u-row>
					<u-row customClass="height100">
						<u-col span="3">
							<view :style="{color:colors.F1,}">
								{{calcedData.F1 || ''}}
							</view>
							<view :style="{color:colors.F2,}">
								{{parseInt(calcedData.F2) || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view :style="{color:colors.G1,}">
								{{calcedData.G1 || ''}}
							</view>
							<view :style="{color:colors.G2,}">
								{{parseInt(calcedData.G2) || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view :style="{color:colors.H1,}">
								{{calcedData.H1 || ''}}
							</view>
							<view :style="{color:colors.H2,}">
								{{calcedData.H2 || ''}}
							</view>
						</u-col>
						<u-col span="3">
							<view>
								{{calcedData.I1 || ''}}:
								<text :style="{color:colors.J1,}">{{calcedData.J1 || ''}}</text>
							</view>
							<view>
								{{calcedData.I2 || ''}}:
								<text :style="{color:colors.J2,}">{{calcedData.J2 || ''}}</text>
							</view>
						</u-col>
					</u-row>
				</u-col>
				<u-col span="5" @click="show=true">
					<view class="fs26" style="margin-bottom: 20rpx;">
						{{lunarDetail(time)}}
					</view>
					<view class="fs26">
						{{formatTime(time)}}
					</view>
				</u-col>
			</u-row>
			<!-- 表体 -->
			<!-- 上字 -->
			<u-row>
				<u-col offset="-0.2" span="1">
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.C4,}">
					{{calcedData.C4 || ''}}
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.F4,}">
					{{calcedData.F4 || ''}}
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.I4,}">
					{{calcedData.I4 || ''}}
				</u-col>
				<u-col span="1">
				</u-col>
			</u-row>
			<!-- 中表 -->
			<!-- 第一行 -->
			<u-row>
				<u-col offset="0.3" span="0.5" customClass="lr-text" :customStyle="{color:colors.A7,}">
					{{calcedData.A7 || ''}}
				</u-col>
				<!-- 第一行第一格 -->
				<u-col span="3.5"
					:customClass="calcedData.C6=='神煞'?'bg-gray border no-bottom no-right':'border no-bottom no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.B5,}">
								{{calcedData.B5 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.C5,}">
								{{calcedData.C5 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.D5,}">
								{{calcedData.D5 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B6,}">
									{{calcedData.B6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B7,}">
									{{calcedData.B7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C6,}">
									{{calcedData.C6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C7,}">
									{{calcedData.C7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D6,}">
									{{calcedData.D6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D7,}">
									{{calcedData.D7 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B8,}">
									{{calcedData.B8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B9,}">
									{{calcedData.B9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C8,}">
									{{calcedData.C8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C9,}">
									{{calcedData.C9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D8,}">
									{{calcedData.D8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D9,}">
									{{calcedData.D9 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B10,}">
									{{calcedData.B10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B11,}">
									{{calcedData.B11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C10,}">
									{{calcedData.C10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C11,}">
									{{calcedData.C11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D10,}">
									{{calcedData.D10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D11,}">
									{{calcedData.D11 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第一行第二格 -->
				<u-col span="3.5"
					:customClass="calcedData.F6=='神煞'?'bg-gray border no-bottom no-right':'border no-bottom no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.E5,}">
								{{calcedData.E5 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.F5,}">
								{{calcedData.F5 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.G5,}">
								{{calcedData.G5 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E6,}">
									{{calcedData.E6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E7,}">
									{{calcedData.E7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F6,}">
									{{calcedData.F6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F7,}">
									{{calcedData.F7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G6,}">
									{{calcedData.G6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G7,}">
									{{calcedData.G7 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E8,}">
									{{calcedData.E8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E9,}">
									{{calcedData.E9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F8,}">
									{{calcedData.F8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F9,}">
									{{calcedData.F9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G8,}">
									{{calcedData.G8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G9,}">
									{{calcedData.G9 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E10,}">
									{{calcedData.E10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E11,}">
									{{calcedData.E11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F10,}">
									{{calcedData.F10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F11,}">
									{{calcedData.F11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G10,}">
									{{calcedData.G10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G11,}">
									{{calcedData.G11 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第一行第三格 -->
				<u-col span="3.5" :customClass="calcedData.I6=='神煞'?'bg-gray border no-bottom':'border no-bottom'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.H5,}">
								{{calcedData.H5 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.I5,}">
								{{calcedData.I5 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.J5,}">
								{{calcedData.J5 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H6,}">
									{{calcedData.H6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H7,}">
									{{calcedData.H7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I6,}">
									{{calcedData.I6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I7,}">
									{{calcedData.I7 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J6,}">
									{{calcedData.J6 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J7,}">
									{{calcedData.J7 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H8,}">
									{{calcedData.H8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H9,}">
									{{calcedData.H9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I8,}">
									{{calcedData.I8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I9,}">
									{{calcedData.I9 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J8,}">
									{{calcedData.J8 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J9,}">
									{{calcedData.J9 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H10,}">
									{{calcedData.H10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H11,}">
									{{calcedData.H11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I10,}">
									{{calcedData.I10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I11,}">
									{{calcedData.I11 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J10,}">
									{{calcedData.J10 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J11,}">
									{{calcedData.J11 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<u-col span="0.5" justify="flex-end" customClass="lr-text" :customStyle="{color:colors.K7,}">
					{{calcedData.K7 || ''}}
				</u-col>
			</u-row>
			<!-- 第一行结束 -->
			<!-- 第二行 -->
			<u-row>
				<u-col offset="0.3" span="0.5" customClass="lr-text" :customStyle="{color:colors.A14,}">
					{{calcedData.A14 || ''}}
				</u-col>
				<!-- 第二行第一格 -->
				<u-col span="3.5"
					:customClass="calcedData.C13=='神煞'?'bg-gray border no-bottom no-right':'border no-bottom no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.B12,}">
								{{calcedData.B12 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.C12,}">
								{{calcedData.C12 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.D12,}">
								{{calcedData.D12 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B13,}">
									{{calcedData.B13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B14,}">
									{{calcedData.B14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C13,}">
									{{calcedData.C13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C14,}">
									{{calcedData.C14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D13,}">
									{{calcedData.D13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D14,}">
									{{calcedData.D14 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B15,}">
									{{calcedData.B15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B16,}">
									{{calcedData.B16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C15,}">
									{{calcedData.C15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C16,}">
									{{calcedData.C16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D15,}">
									{{calcedData.D15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D16,}">
									{{calcedData.D16 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B17,}">
									{{calcedData.B17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B18,}">
									{{calcedData.B18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C17,}">
									{{calcedData.C17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C18,}">
									{{calcedData.C18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D17,}">
									{{calcedData.D17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D18,}">
									{{calcedData.D18 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第二行第二格 -->
				<u-col span="3.5"
					:customClass="calcedData.F13=='神煞'?'bg-gray border no-bottom no-right':'border no-bottom no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.E12,}">
								{{calcedData.E12 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.F12,}">
								{{calcedData.F12 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.G12,}">
								{{calcedData.G12 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E13,}">
									{{calcedData.E13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E14,}">
									{{calcedData.E14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F13,}">
									{{calcedData.F13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F14,}">
									{{calcedData.F14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G13,}">
									{{calcedData.G13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G14,}">
									{{calcedData.G14 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E15,}">
									{{calcedData.E15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E16,}">
									{{calcedData.E16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F15,}">
									{{calcedData.F15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F16,}">
									{{calcedData.F16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G15,}">
									{{calcedData.G15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G16,}">
									{{calcedData.G16 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E17,}">
									{{calcedData.E17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E18,}">
									{{calcedData.E18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F17,}">
									{{calcedData.F17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F18,}">
									{{calcedData.F18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G17,}">
									{{calcedData.G17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G18,}">
									{{calcedData.G18 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第二行第三格 -->
				<u-col span="3.5" :customClass="calcedData.I13=='神煞'?'bg-gray border no-bottom':'border no-bottom'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.H12,}">
								{{calcedData.H12 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.I12,}">
								{{calcedData.I12 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.J12,}">
								{{calcedData.J12 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H13,}">
									{{calcedData.H13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H14,}">
									{{calcedData.H14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I13,}">
									{{calcedData.I13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I14,}">
									{{calcedData.I14 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J13,}">
									{{calcedData.J13 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J14,}">
									{{calcedData.J14 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H15,}">
									{{calcedData.H15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H16,}">
									{{calcedData.H16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I15,}">
									{{calcedData.I15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I16,}">
									{{calcedData.I16 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J15,}">
									{{calcedData.J15 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J16,}">
									{{calcedData.J16 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H17,}">
									{{calcedData.H17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H18,}">
									{{calcedData.H18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I17,}">
									{{calcedData.I17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I18,}">
									{{calcedData.I18 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J17,}">
									{{calcedData.J17 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J18,}">
									{{calcedData.J18 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<u-col span="0.5" justify="flex-end" customClass="lr-text" :customStyle="{color:colors.K14,}">
					{{calcedData.K14 || ''}}
				</u-col>
			</u-row>
			<!-- 第二行结束 -->
			<!-- 第三行 -->
			<u-row>
				<u-col offset="0.3" span="0.5" customClass="lr-text" :customStyle="{color:colors.A21,}">
					{{calcedData.A21 || ''}}
				</u-col>
				<!-- 第三行第一格 -->
				<u-col span="3.5" :customClass="calcedData.C20=='神煞'?'bg-gray border no-right':'border no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.B19,}">
								{{calcedData.B19 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.C19,}">
								{{calcedData.C19 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.D19,}">
								{{calcedData.D19 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B20,}">
									{{calcedData.B20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B21,}">
									{{calcedData.B21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C20,}">
									{{calcedData.C20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C21,}">
									{{calcedData.C21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D20,}">
									{{calcedData.D20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D21,}">
									{{calcedData.D21 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B22,}">
									{{calcedData.B22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B23,}">
									{{calcedData.B23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C22,}">
									{{calcedData.C22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C23,}">
									{{calcedData.C23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D22,}">
									{{calcedData.D22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D23,}">
									{{calcedData.D23 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.B24,}">
									{{calcedData.B24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.B25,}">
									{{calcedData.B25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.C24,}">
									{{calcedData.C24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.C25,}">
									{{calcedData.C25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.D24,}">
									{{calcedData.D24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.D25,}">
									{{calcedData.D25 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第三行第二格 -->
				<u-col span="3.5" :customClass="calcedData.F20=='神煞'?'bg-gray border no-right':'border no-right'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.E19,}">
								{{calcedData.E19 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.F19,}">
								{{calcedData.F19 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.G19,}">
								{{calcedData.G19 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E20,}">
									{{calcedData.E20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E21,}">
									{{calcedData.E21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F20,}">
									{{calcedData.F20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F21,}">
									{{calcedData.F21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G20,}">
									{{calcedData.G20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G21,}">
									{{calcedData.G21 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E22,}">
									{{calcedData.E22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E23,}">
									{{calcedData.E23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F22,}">
									{{calcedData.F22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F23,}">
									{{calcedData.F23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G22,}">
									{{calcedData.G22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G23,}">
									{{calcedData.G23 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.E24,}">
									{{calcedData.E24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.E25,}">
									{{calcedData.E25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.F24,}">
									{{calcedData.F24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.F25,}">
									{{calcedData.F25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.G24,}">
									{{calcedData.G24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.G25,}">
									{{calcedData.G25 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<!-- 第三行第三格 -->
				<u-col span="3.5" :customClass="calcedData.I20=='神煞'?'bg-gray border':'border'">
					<view class="center-height">
						<u-row customClass="box-top">
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.H19,}">
								{{calcedData.H19 || ''}}
							</u-col> -->
							<u-col span="12" customClass="inner-hint" :customStyle="{color:colors.I19,}">
								{{calcedData.I19 || ''}}
							</u-col>
<!-- 							<u-col span="3.5" customClass="inner-hint" :customStyle="{color:colors.J19,}">
								{{calcedData.J19 || ''}}
							</u-col> -->
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H20,}">
									{{calcedData.H20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H21,}">
									{{calcedData.H21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I20,}">
									{{calcedData.I20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I21,}">
									{{calcedData.I21 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J20,}">
									{{calcedData.J20 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J21,}">
									{{calcedData.J21 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H22,}">
									{{calcedData.H22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H23,}">
									{{calcedData.H23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I22,}">
									{{calcedData.I22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I23,}">
									{{calcedData.I23 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J22,}">
									{{calcedData.J22 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J23,}">
									{{calcedData.J23 || ''}}
								</view>
							</u-col>
						</u-row>
						<u-row customClass="inner-height">
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.H24,}">
									{{calcedData.H24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.H25,}">
									{{calcedData.H25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.I24,}">
									{{calcedData.I24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.I25,}">
									{{calcedData.I25 || ''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="inner-main" :style="{color:colors.J24,}">
									{{calcedData.J24 || ''}}
								</view>
								<view class="inner-hint" :style="{color:colors.J25,}">
									{{calcedData.J25 || ''}}
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<u-col span="0.5" justify="flex-end" customClass="lr-text" :customStyle="{color:colors.K21,}">
					{{calcedData.K21 || ''}}
				</u-col>
			</u-row>
			<!-- 第三行结束 -->
			<!-- 下字 -->
			<u-row>
				<u-col offset="-0.2" span="1">
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.C26,}">
					{{calcedData.C26 || ''}}
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.F26,}">
					{{calcedData.F26 || ''}}
				</u-col>
				<u-col span="3.5" :customStyle="{color:colors.I26,}">
					{{calcedData.I26 || ''}}
				</u-col>
				<u-col span="1">
				</u-col>
			</u-row>
		</view>

		<view class="bottom-buttons">
			<view class="button" @click="timeMinus">
				<u-icon name="arrow-leftward"></u-icon>
			</view>
			<view class="button" @click="nowTime">
				<u-icon name="more-dot-fill"></u-icon>
			</view>
			<view class="button" @click="timePlus">
				<u-icon name="arrow-rightward"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sloarToLunar
	} from './computedLunarDate.js'

	function timestampToYMDHM(timestamp) {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
		const day = ('0' + date.getDate()).slice(-2);
		const hours = ('0' + date.getHours()).slice(-2);
		const minutes = ('0' + date.getMinutes()).slice(-2);
		const seconds = ('0' + date.getSeconds()).slice(-2);
		// return `${year}${month}${day} ${hours}:${minutes}:${seconds}`;
		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}

	function getymd(timestamp) {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
		const day = ('0' + date.getDate()).slice(-2);
		return [year, month, day];
	}

	function numberTrans(number) {
		const numbers = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', ]
		return numbers[number]
	}
	export default {
		data() {
			return {
				show: false,
				time: Number(new Date()),
				calcedData: {},
				colors: {},
			};
		},
		watch: {
			time: function(newValue) {
				console.log(newValue)
				this.getexcelData()
			},
		},
		onLoad() {
			this.getexcelData()
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods: {
			getexcelData() {
				uni.request({
					url: 'https://www.dunjiali.top/api/compass',
					data: {
						dateStr: timestampToYMDHM(this.time),
					},
					success: (res) => {
						const data = res.data.data
						this.calcedData = this.formatData(data)[0]
						this.colors = this.formatData(data)[1]
						console.log(this.colors)
					}
				});
			},
			formatData(data) {
				let formated = {}
				let colors = {}
				data.map(item => {
					let inner = item.split(':')
					let value = inner[1].split(',')
					formated[inner[0]] = value[0]
					colors[inner[0]] = value[1]
				})
				return [formated, colors]
			},
			timePlus() {
				this.time += 144 * 60 * 1000
			},
			timeMinus() {
				this.time -= 144 * 60 * 1000
			},
			nowTime() {
				this.time = Number(new Date())
			},
			formatTime(time) {
				return timestampToYMDHM(time)
			},
			lunarDetail(time) {
				const data = getymd(time)
				const lunar = sloarToLunar(data[0], data[1].toString().padStart(2, '0'), parseInt(data[2]))
				let year = ''
				for (let i = 0; i < data[0].toString().length; i++) {
					year += numberTrans(data[0].toString()[i])
				}
				return `${year}年${lunar.lunarMonth}月${lunar.lunarDay}`;
			},
			close() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.time = e.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-size: 22rpx;
		font-weight: bold;
	}

	/deep/view {
		font-size: 22rpx;
		font-weight: bold;
	}

	/deep/.fs-44 {
		font-size: 50rpx;
	}

	/deep/.u-col {
		text-align: center !important;
	}

	/deep/.border {
		border: 1rpx solid #666;
	}

	/deep/.no-right {
		border-right: none;
	}

	/deep/.no-bottom {
		border-bottom: none;
	}

	/deep/.lr-text {
		writing-mode: vertical-rl;
		letter-spacing: 10rpx;
	}

	/deep/.box-top {
		height: 15rpx;
		padding-top: 5rpx;
	}

	/deep/.bottom-buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 100rpx;
		margin-right: 40rpx;
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 30rpx;
		border-radius: 15rpx;
		border: 1rpx solid #999;
		margin-left: 30rpx;
	}

	/deep/.center-height {
		height: 230rpx;
	}

	/deep/.inner-height {
		height: 70rpx;
	}

	/deep/.inner-main {
		font-size: 28rpx;
	}

	/deep/.inner-hint {
		font-size: 16rpx;
		font-weight: normal;
		margin-top: 5rpx;
	}

	/deep/.bg-gray {
		background-color: #f0f0f0;
	}

	/deep/.height100 {
		height: 100rpx;
	}

	.fs26 {
		font-size: 26rpx;
	}
</style>